<template>
  <div class="container">
    <p class="warning" v-show="companyInfo.isChecked == 0">
      <i class="el-icon-warning"></i>
      <span class="desc"
        >未通过新华信用接口校验，请仔细核对<span style="color: red"
          >单位名称</span
        >和<span style="color: red">统一社会信用代码</span>是否正确！</span
      >
    </p>
    <div class="spacing"></div>
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <!-- <el-row>
              <div v-show="companyInfo.isChecked==0" class="tipCheck" >未通过新华信用接口校验，请仔细核对单位名称和统一社会信用代码是否正确！</div>
            </el-row> -->
      <div class="companyInfoBox">
        <el-row class="secondaryTitle secondaryTitleTheme"> 申请信息 </el-row>
        <el-row class="itemInfo" :gutter="20">
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >单位名称：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.name || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >统一社会信用代码：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.uscc || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >注册登记地区：</span
            >
            <span
              v-if="companyInfo.belong == '外地企业'"
              class="gridContent contentSty color666 fontSizeF"
              >{{ companyInfo.regProvinceName }}-{{
                companyInfo.regCityName
              }}</span
            >
            <span v-else class="gridContent contentSty color666 fontSizeF"
              >{{ companyInfo.regCityName }}-{{
                companyInfo.regCountyName
              }}</span
            >
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >经营地区：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.manageAdrress
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >所属行业：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.industry || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >密保手机号：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.tel || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >单位类型：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              departmentTypeFun || '--'
            }}</span>
          </el-col>
          <el-col
            :span="12"
            class="labelWidthSty detailInfoItemSty"
            v-if="companyInfo.departmentType == '0'"
          >
            <span class="gridContent color333 fontSizeF fontWeight"
              >企业类型：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              companyInfo.companyType || '--'
            }}</span>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="spacing"></div> -->
      <el-divider></el-divider>
      <div class="applyInfoBox">
        <el-row class="secondaryTitle secondaryTitleTheme"> 认证资料 </el-row>
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="companyInfo.licenseImg"
                :preview-src-list="licenseList"
              >
              </el-image>
            </div>
            <span
              v-if="
                this.companyInfo.departmentType == '0' ||
                this.companyInfo.departmentType == '15'
              "
              >营业执照</span
            >
            <span v-else>单位登记证书</span>
          </div>
          <div
            class="itemBox"
            v-if="
              this.companyInfo.departmentType == '0' ||
              this.companyInfo.departmentType == '15'
            "
          >
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="companyInfo.idcardFront"
                :preview-src-list="idcardList1"
              >
              </el-image>
            </div>
            <span v-if="this.companyInfo.departmentType == '0'"
              >法人身份证正面</span
            >
            <span v-if="this.companyInfo.departmentType == '15'"
              >经营者身份证正面</span
            >
          </div>
          <div
            class="itemBox"
            v-if="
              this.companyInfo.departmentType == '0' ||
              this.companyInfo.departmentType == '15'
            "
          >
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="companyInfo.idcardBack"
                :preview-src-list="idcardList2"
              >
              </el-image>
            </div>
            <span v-if="this.companyInfo.departmentType == '0'"
              >法人身份证反面</span
            >
            <span v-if="this.companyInfo.departmentType == '15'"
              >经营者身份证反面</span
            >
          </div>
        </el-row>
      </div>
      <el-row class="btnBox">
        <el-button
          size="medium"
          class="submitBtn listAddBtn"
          @click="submitForm()"
          :loading="canSubmit"
          >审核通过</el-button
        >
        <el-button
          size="medium"
          class="cancelBtn rejectFrom"
          @click="rejectFrom()"
          >驳回</el-button
        >
        <el-button size="medium" class="cancelBtn" @click="goBack()"
          >取消</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'checkPage',
  data() {
    return {
      titleText: '单位审核页',
      canSubmit: false, //是否可以提交
      id: '', //列表id
      back: true,
      companyInfo: {
        name: '',
        uscc: '',
        belong: '',
        scale: '',
        industry: '',
        tel: '',
        regAdrress: '',
        manageAdrress: '',
        licenseImg: '',
        idcardFront: '',
        idcardBack: '',
        departmentType: '', //单位类型 0：企业单位;5：事业单位;10：其他
        isChecked: '', //是否经过新华信用校验 1：已通过校验;0：未通过校验
        isCredible: '', //是否真实准确 1：真实准确;0：不真实准确
        regCityName: '',
        regProvinceName: '',
        regCountyName: '',
      },
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      licenseList: [],
      idcardList1: [],
      idcardList2: [],
    }
  },
  created() {
    //加载loading
    //this.openFullScreen();
    this.$store.commit(
      'set_active_index',
      '/home/enterpriseSet/employerAuditList'
    )
    this.$store.state.activeMenu = '/home/enterpriseSet/employerAuditList'
    this.$store.commit('GOBACK_NAME', {
      oldUrl: '/home/enterpriseSet/employerAuditList',
      newUrl: this.$router.currentRoute.fullPath,
    })
    this.id = this.$route.query.id

    //获取企业详情
    this.getCompanyDetail()
  },
  computed: {
    departmentTypeFun() {
      if (this.companyInfo.departmentType == '0') {
        return '企业'
      } else if (this.companyInfo.departmentType == '5') {
        return '事业单位'
      } else if (this.companyInfo.departmentType == '10') {
        return '其他'
      } else if (this.companyInfo.departmentType == '15') {
        return '个体工商户'
      }
    },
  },
  methods: {
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },
    getCompanyDetail() {
      var vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/companyaudit/expand/companyauditdetail',
        data: {
          id: vm.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            const result = res.data.result
            vm.companyInfo.name = result.name
            vm.companyInfo.uscc = result.uscc
            vm.companyInfo.belong = result.belongs
            vm.companyInfo.scale = result.scale
            vm.companyInfo.industry = result.industryName
            vm.companyInfo.tel = result.tel
            vm.companyInfo.companyType = result.companyType
            vm.companyInfo.regAdrress = result.regAreaName
            vm.companyInfo.manageAdrress = result.bizAreaName
            vm.companyInfo.departmentType = result.departmentType
            vm.companyInfo.isChecked = result.isChecked
            vm.companyInfo.isCredible = result.isCredible
            vm.companyInfo.regCityName = result.regCityName
            vm.companyInfo.regProvinceName = result.regProvinceName
            vm.companyInfo.regCountyName = result.regCountyName
            var imgLength = result.fileVOs.length
            if (imgLength > 0) {
              this.companyInfo.licenseImg = result.fileVOs[0].absolutePath
              this.licenseList.push(result.fileVOs[0].absolutePath)
              this.companyInfo.idcardFront = result.fileVOs[1].absolutePath
              this.idcardList1.push(result.fileVOs[1].absolutePath)
              this.companyInfo.idcardBack = result.fileVOs[2].absolutePath
              this.idcardList2.push(result.fileVOs[2].absolutePath)
            }
          } else {
            this.$message({
              showClose: true,
              message: '加载审核信息失败',
              type: 'error',
            })
          }
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: '加载审核信息失败',
            type: 'error',
          })
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
    },
    //审核通过
    submitForm() {
      this.$confirm(
        '是否确认审核通过？通过则系统将自动为企业分配账号',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.canSubmit = true
          this.checkRequset()
        })
        .catch(() => {
          //取消
        })
    },
    //通过请求
    checkRequset() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/companyaudit/expand/editstatus',
        data: {
          id: vm.id,
          status: 'APPROVED',
        },
      })
        .then(
          (res) => {
            this.canSubmit = false
            if (!res.data.hasError) {
              this.$message({
                message: '审核通过',
                type: 'success',
              })
              //跳转审核详情页
              vm.$router.push({
                name: 'checkDetailPage',
                path: 'home/checkManage/checkDetailPage',
                query: {
                  id: vm.id,
                },
              })
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/enterpriseSet/employerAuditList',
                newUrl: this.$router.currentRoute.fullPath,
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canSubmit = false
            this.$message({
              message: '审核失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //驳回
    rejectFrom() {
      this.$prompt('驳回原因：', '驳回', {
        inputType: 'textarea',
        cancelButtonText: '取消',
        confirmButtonText: '确认驳回',
        inputPlaceholder: '请输入驳回原因，不超过20个字',
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: '需填写驳回原因，不超过20个字符',
      })
        .then(({ value }) => {
          this.rejectRequset(value)
        })
        .catch(() => {
          //取消
        })
    },
    //驳回请求
    rejectRequset(value) {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/companyaudit/expand/editstatus',
        data: {
          id: vm.id,
          status: 'REFUSED',
          reason: value,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '审核不通过',
              type: 'warning',
            })
            //跳转审核详情页
            vm.$router.push({
              name: 'checkDetailPage',
              path: 'home/checkManage/checkDetailPage',
              query: {
                id: vm.id,
              },
            })
            vm.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/enterpriseSet/employerAuditList',
              newUrl: vm.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    //页面返回
    goBack() {
      this.$router.push('/home/enterpriseSet/employerAuditList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseSet/employerAuditList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    padding: 0;
    height: calc(100% - 96px);
    .itemTitle {
      font-size: 18px;
      // border-bottom: 1px solid #DEE5F4;
      line-height: 50px;
    }
    .companyInfoBox {
      padding: 20px 24px 40px 38px;
      // .itemInfo{
      //     font-size: 14px;
      //     .el-col{
      //         margin-top: 18px;
      //         label{
      //             width: 126px;
      //             text-align: right;
      //             display: inline-block;
      //             color: #666;
      //         }
      //         span{
      //             color: #151515;
      //         }
      //     }
      // }
    }
    .applyInfoBox {
      // margin-top:25px;
      padding: 24px;
      .yellow {
        color: #f9a243;
      }
      .imgBoxs {
        padding: 24px;
        text-align: center;
        .itemBox {
          font-size: 14px;
          display: inline-block;
          margin-right: 54px;
          .imgBox {
            width: 200px;
            height: 200px;
            background: rgba(222, 229, 244, 0.3);
            margin-bottom: 10px;
            span {
              color: #333;
              font-size: 14px;
            }
            // /deep/.el-image__inner--center{
            //     top:0px \9;
            //     left:0px \9;
            // }
          }
          .licenseBox {
            .el-image {
              margin-top: 11.5px;
            }
          }
          .idcardBox {
            .el-image {
              margin-top: 46.5px;
            }
          }
        }
        .itemBox:nth-child(3) {
          margin-right: 0px;
        }
      }
    }
    .btnBox {
      text-align: center;
      padding-bottom: 30px;
    }
  }
}

.rejectFrom {
  background: #3e5265;
  border-color: #3e5265;
  color: #fff;
  &:hover {
    background-color: #3e5265;
    border-color: #3e5265;
    color: #fff;
    opacity: 0.8;
  }
}

.tipCheck {
  background-color: #faffad;
  text-align: center;
  color: #b71617;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.warning {
  height: 36px;
  line-height: 36px;
  background: #fef7eb;
  border-left: 3px solid #ffb96b;
  border-radius: 4px;
  .el-icon-warning {
    font-size: 20px;
    color: #ffb96b;
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
    margin-right: 10px;
  }
  .desc {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    // margin-left: 10px;
  }
}
.submitBtn {
  margin: 10px auto 0px !important;
}
</style>
